import React from "react";
import { Controlled as CodeMirror } from "react-codemirror2";

import "codemirror/lib/codemirror.css";

import "codemirror/theme/darcula.css";
import "codemirror/mode/javascript/javascript";

import "codemirror/addon/edit/closebrackets";
import "codemirror/addon/edit/closetag";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/matchtags";

import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/foldgutter.css";

import "codemirror/addon/lint/lint"
import "codemirror/addon/lint/javascript-lint"
import "codemirror/addon/lint/lint.css"
// @ts-ignore
import jshint from 'jshint'
// @ts-ignore
window.JSHINT = jshint.JSHINT;

interface JavascriptEditorProps {
  value: string;
  onChange: (value: string) => void;
}

export default function JavascriptEditor(props: JavascriptEditorProps) {
  const { value, onChange } = props;

  return (
    <CodeMirror
      value={value}
      options={{
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
        mode: { name: 'javascript', json: true },
        lineNumbers: true,
        lineWrapping: false,
        theme: "darcula",
        autoCloseTags: true,
        autoCloseBrackets: true,
        lint: true,
        matchBrackets: true,
        matchTags: true,
        indentUnit: 2,
        tabSize: 2,
      }}
      onBeforeChange={(editor, data, value) => {
        if (onChange) {
          onChange(value);
        }
      }}
      onChange={(editor, data, value) => { }}
    />
  );
}
